<template>
	<view class="page-container">
		<layout layoutTitle="入库申请" />
		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input class="search-input" type="text" placeholder="搜索入库申请" />
			</view>
			<view class="filter-btn">
				<text class="filter-icon">⚙️</text>
			</view>
		</view>
		
		<!-- 状态统计栏 -->
		<view class="stats-bar">
			<view class="stat-item active">
				<text class="stat-value">{{ total }}</text>
				<text class="stat-label">全部</text>
			</view>
			<view class="stat-item">
				<text class="stat-value">{{ todayCount }}</text>
				<text class="stat-label">今日申请</text>
			</view>
			<view class="stat-item">
				<text class="stat-value">{{ storageCount }}</text>
				<text class="stat-label">入库申请</text>
			</view>
		</view>
		
		<!-- 加载中 -->
		<view class="loading" v-if="loading">
			<text>加载中...</text>
		</view>
		
		<!-- 入库申请列表 -->
		<view class="storage-list" v-else>
			<!-- 遍历入库申请数据 -->
			<view class="storage-card" v-for="(item, index) in storageList" :key="index">
				<view class="card-header">
					<view class="applicant-avatar">
						<text class="avatar-text">{{ item.applicant.charAt(0) }}</text>
					</view>
					<view class="applicant-info">
						<text class="applicant-name">{{ item.applicant }}</text>
						<text class="applicant-meta">{{ item.department }} | {{ item.position }}</text>
					</view>
					<view class="urgent-tag" v-if="isUrgent(item)">
						<text class="tag-text">紧急</text>
					</view>
				</view>
				
				<view class="card-body">
					<view class="info-row">
						<text class="info-label">申请编号：</text>
						<text class="info-value">{{ item.id }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">申请理由：</text>
						<text class="info-value">{{ item.reason }}</text>
					</view>
					
					<view class="material-preview">
						<view class="preview-header">
							<text class="preview-title">物料信息预览</text>
							<text class="total-item">共{{ item.materials.length }}种</text>
						</view>
						<view class="preview-item" v-for="(material, midx) in item.materials.slice(0, 2)" :key="midx">
							<text class="item-name">{{ material.name }}</text>
							<text class="item-count">x{{ material.quantity }}{{ material.unit }}</text>
						</view>
						<view class="preview-item" v-if="item.materials.length > 2">
							<text class="item-name">更多物料...</text>
							<text class="item-count">点击查看详情</text>
						</view>
					</view>
				</view>
				
				<view class="card-footer">
					<view class="time-info">
						<text class="clock-icon">🕒</text>
						<text>申请时间：{{ formatDate(item.applyTime) }}</text>
					</view>
					<view class="action-btns">
						<view class="btn detail-btn" @click="showDetailsDialog(item)">详情</view>
						<view class="btn reject-btn" @click="showRejectDialog(item)">拒绝</view>
						<view class="btn approve-btn" @click="showApproveDialog(item)">批准</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="storageList.length === 0">
				<image class="empty-icon" src="/static/images/empty.png"></image>
				<text class="empty-text">暂无入库申请</text>
			</view>
		</view>
		
		<!-- 确认对话框 -->
		<view class="dialog-mask" v-if="showDialog && dialogType !== 'details'">
			<view class="dialog-container">
				<view class="dialog-header">
					<text class="dialog-title">{{ dialogTitle }}</text>
				</view>
				<view class="dialog-content">
					<text class="dialog-message">{{ dialogMessage }}</text>
				</view>
				<view class="dialog-footer">
					<view class="dialog-btn cancel-btn" @click="cancelDialog">取消</view>
					<view class="dialog-btn confirm-btn" @click="confirmDialog">确认</view>
				</view>
			</view>
		</view>
		
		<!-- 物料详情对话框 -->
		<view class="dialog-mask" v-if="showDialog && dialogType === 'details'">
			<view class="dialog-container">
				<view class="dialog-header">
					<text class="dialog-title">物料详情</text>
				</view>
				<view class="dialog-content">
					<text class="dialog-message" v-if="currentItem">申请人：{{ currentItem.applicant }}</text>
					<view class="material-list" v-if="currentItem">
						<view class="material-item" v-for="(material, idx) in currentItem.materials" :key="idx">
							<view class="material-details">
								<text class="material-name">{{ material.name }}</text>
								<text class="material-spec">{{ material.specification }}</text>
							</view>
							<text class="material-quantity">{{ material.quantity }}{{ material.unit }}</text>
						</view>
					</view>
				</view>
				<view class="dialog-footer">
					<view class="dialog-btn confirm-btn" style="border-right: none;" @click="closeDetailsDialog">关闭</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 状态变量
const loading = ref(true);
const storageList = ref([]);
const total = ref(0);
const todayCount = ref(0);
const storageCount = ref(0);
const showDialog = ref(false);
const dialogType = ref('');
const dialogTitle = ref('');
const dialogMessage = ref('');
const currentItem = ref(null);
const dialogAction = ref('');

// 日期格式化函数
const formatDate = (date) => {
	const d = new Date(date);
	const year = d.getFullYear();
	const month = String(d.getMonth() + 1).padStart(2, '0');
	const day = String(d.getDate()).padStart(2, '0');
	const hour = String(d.getHours()).padStart(2, '0');
	const minute = String(d.getMinutes()).padStart(2, '0');
	return `${year}-${month}-${day} ${hour}:${minute}`;
};

// 判断是否紧急申请
const isUrgent = (item) => {
	// 定义紧急申请的逻辑，例如今天申请的都是紧急的
	const today = new Date();
	today.setHours(0, 0, 0, 0);
	const itemDate = new Date(item.applyTime);
	itemDate.setHours(0, 0, 0, 0);
	return itemDate.getTime() === today.getTime();
};

// 显示物料详情弹窗
const showDetailsDialog = (item) => {
	currentItem.value = item;
	dialogType.value = 'details';
	showDialog.value = true;
};

// 关闭详情弹窗
const closeDetailsDialog = () => {
	showDialog.value = false;
	dialogType.value = '';
};

// 显示批准弹窗
const showApproveDialog = (item) => {
	dialogTitle.value = '批准申请';
	dialogMessage.value = `确定批准 ${item.applicant} 的入库申请吗？`;
	currentItem.value = item;
	dialogAction.value = 'approve';
	dialogType.value = 'confirm';
	showDialog.value = true;
};

// 显示拒绝弹窗
const showRejectDialog = (item) => {
	dialogTitle.value = '拒绝申请';
	dialogMessage.value = `确定拒绝 ${item.applicant} 的入库申请吗？`;
	currentItem.value = item;
	dialogAction.value = 'reject';
	dialogType.value = 'confirm';
	showDialog.value = true;
};

// 取消对话框
const cancelDialog = () => {
	showDialog.value = false;
	dialogType.value = '';
};

// 确认对话框
const confirmDialog = () => {
	if (dialogAction.value === 'approve') {
		// 处理批准逻辑
		console.log('批准入库申请', currentItem.value);
		// 移除已批准的项目
		storageList.value = storageList.value.filter(item => item.id !== currentItem.value.id);
		total.value = storageList.value.length;
		storageCount.value = storageList.value.length;
		if (isUrgent(currentItem.value)) {
			todayCount.value--;
		}
		// 这里应该有一个API调用来更新服务器数据
	} else if (dialogAction.value === 'reject') {
		// 处理拒绝逻辑
		console.log('拒绝入库申请', currentItem.value);
		// 移除已拒绝的项目
		storageList.value = storageList.value.filter(item => item.id !== currentItem.value.id);
		total.value = storageList.value.length;
		storageCount.value = storageList.value.length;
		if (isUrgent(currentItem.value)) {
			todayCount.value--;
		}
		// 这里应该有一个API调用来更新服务器数据
	}
	showDialog.value = false;
	dialogType.value = '';
};

// 获取入库申请列表数据
const fetchStorageList = () => {
	// 模拟数据
	storageList.value = [
		{
			id: 'RK202304001',
			applicant: '张工',
			department: '生产部',
			position: '主管',
			reason: '生产线原材料补充',
			applyTime: new Date(2023, 3, 10, 9, 30),
			materials: [
				{
					name: '环保塑料颗粒',
					specification: '型号A-100',
					quantity: 200,
					unit: 'kg'
				},
				{
					name: '有机颜料',
					specification: '绿色G-50',
					quantity: 10,
					unit: 'kg'
				},
				{
					name: '包装纸箱',
					specification: '30x20x15cm',
					quantity: 100,
					unit: '个'
				}
			]
		},
		{
			id: 'RK202304002',
			applicant: '李经理',
			department: '研发部',
			position: '经理',
			reason: '新产品开发样品制作',
			applyTime: new Date(),
			materials: [
				{
					name: '可降解材料',
					specification: 'BD-200',
					quantity: 50,
					unit: 'kg'
				},
				{
					name: '实验用具',
					specification: '标准套装',
					quantity: 2,
					unit: '套'
				}
			]
		},
		{
			id: 'RK202304003',
			applicant: '王科长',
			department: '质检部',
			position: '科长',
			reason: '质量检测设备更新',
			applyTime: new Date(2023, 3, 8, 14, 20),
			materials: [
				{
					name: '测试仪器',
					specification: 'QC-5000',
					quantity: 1,
					unit: '台'
				},
				{
					name: '校准工具',
					specification: '精密型',
					quantity: 5,
					unit: '套'
				},
				{
					name: '检测试剂',
					specification: '环保型',
					quantity: 20,
					unit: '瓶'
				},
				{
					name: '记录本',
					specification: 'A4',
					quantity: 10,
					unit: '本'
				}
			]
		}
	];
	
	total.value = storageList.value.length;
	
	// 计算今日申请数量
	const today = new Date();
	today.setHours(0, 0, 0, 0);
	todayCount.value = storageList.value.filter(item => {
		const itemDate = new Date(item.applyTime);
		itemDate.setHours(0, 0, 0, 0);
		return itemDate.getTime() === today.getTime();
	}).length;
	
	// 所有入库申请数量
	storageCount.value = storageList.value.length;
	
	loading.value = false;
};

// 页面初始化时获取数据
onMounted(() => {
	// 模拟加载数据
	setTimeout(() => {
		fetchStorageList();
	}, 1000);
});
</script>

<style lang="scss">
/* 页面容器 */
.page-container {
	background-color: #f6fbf8; // 淡绿色背景
	min-height: 100vh;
	padding-bottom: 30rpx;
}

/* 筛选栏样式 */
.filter-bar {
	background-color: #ffffff;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 2rpx 10rpx rgba(60, 98, 85, 0.08);
	margin-bottom: 20rpx;
	
	.search-box {
		flex: 1;
		height: 64rpx;
		background-color: #f1f8f5; // 淡绿色底
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		
		.search-icon {
			color: #3c6255; // 绿色
			font-size: 32rpx;
			margin-right: 10rpx;
		}
		
		.search-input {
			flex: 1;
			height: 64rpx;
			font-size: 28rpx;
			color: #1a5336;
			
			&::placeholder {
				color: #a5c9a1;
			}
		}
	}
	
	.filter-btn {
		margin-left: 20rpx;
		width: 64rpx;
		height: 64rpx;
		background-color: #f1f8f5; // 淡绿色底
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.filter-icon {
			font-size: 36rpx;
			color: #3c6255; // 绿色
		}
	}
}

/* 状态统计栏 */
.stats-bar {
	display: flex;
	background-color: #ffffff;
	padding: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(60, 98, 85, 0.08);
	
	.stat-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		
		&:not(:last-child):after {
			content: '';
			position: absolute;
			right: 0;
			top: 20%;
			height: 60%;
			width: 1rpx;
			background-color: rgba(60, 98, 85, 0.1); // 绿色分隔线
		}
		
		.stat-value {
			font-size: 40rpx;
			font-weight: bold;
			color: #1a5336; // 深绿色
			line-height: 1.2;
		}
		
		.stat-label {
			font-size: 24rpx;
			color: #3c6255; // 中绿色
			margin-top: 8rpx;
		}
		
		&.active {
			.stat-value, .stat-label {
				color: #00a870; // 绿色
			}
		}
	}
}

/* 加载中 */
.loading {
	text-align: center;
	padding: 30rpx;
	color: #3c6255; // 中绿色
}

/* 入库申请列表 */
.storage-list {
	padding: 0 20rpx;
	
	.storage-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(60, 98, 85, 0.08); // 绿色阴影
		margin-bottom: 20rpx;
		overflow: hidden;
		position: relative;
		
		.card-header {
			display: flex;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1rpx solid rgba(60, 98, 85, 0.1); // 绿色分隔线
			
			.applicant-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				background-color: #edf7f0; // 淡绿色
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				
				.avatar-text {
					font-size: 32rpx;
					font-weight: bold;
					color: #00a870; // 绿色
				}
			}
			
			.applicant-info {
				flex: 1;
				
				.applicant-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #1a5336; // 深绿色
					margin-bottom: 8rpx;
				}
				
				.applicant-meta {
					font-size: 24rpx;
					color: #3c6255; // 中绿色
				}
			}
			
			.urgent-tag {
				padding: 4rpx 16rpx;
				background-color: rgba(0, 168, 112, 0.15); // 透明绿色
				border-radius: 100rpx;
				margin-left: 10rpx;
				
				.tag-text {
					font-size: 22rpx;
					color: #00a870; // 绿色
				}
			}
		}
		
		.card-body {
			padding: 20rpx;
			
			.info-row {
				display: flex;
				margin-bottom: 16rpx;
				
				.info-label {
					width: 160rpx;
					font-size: 26rpx;
					color: #3c6255; // 中绿色
				}
				
				.info-value {
					flex: 1;
					font-size: 26rpx;
					color: #1a5336; // 深绿色
				}
			}
			
			.material-preview {
				background-color: #f1f8f5; // 淡绿色底
				border-radius: 8rpx;
				padding: 16rpx;
				margin-top: 16rpx;
				
				.preview-header {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;
					
					.preview-title {
						font-size: 26rpx;
						font-weight: bold;
						color: #1a5336; // 深绿色
					}
					
					.total-item {
						font-size: 24rpx;
						color: #3c6255; // 中绿色
					}
				}
				
				.preview-item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 8rpx;
					
					.item-name {
						font-size: 24rpx;
						color: #3c6255; // 中绿色
					}
					
					.item-count {
						font-size: 24rpx;
						color: #00a870; // 绿色
						font-weight: 500;
					}
				}
			}
		}
		
		.card-footer {
			display: flex;
			padding: 20rpx;
			justify-content: space-between;
			align-items: center;
			border-top: 1rpx solid rgba(60, 98, 85, 0.1); // 绿色分隔线
			
			.time-info {
				font-size: 24rpx;
				color: #3c6255; // 中绿色
				display: flex;
				align-items: center;
				
				.clock-icon {
					margin-right: 8rpx;
				}
			}
			
			.action-btns {
				display: flex;
				gap: 16rpx;
				
				.btn {
					padding: 8rpx 24rpx;
					border-radius: 100rpx;
					font-size: 24rpx;
					font-weight: 500;
					
					&.detail-btn {
						background-color: #f1f8f5; // 淡绿色
						color: #3c6255; // 中绿色
					}
					
					&.reject-btn {
						background-color: #fff2f0; // 淡红色
						color: #f5222d; // 红色
					}
					
					&.approve-btn {
						background-color: #e6f7ff; // 淡蓝色
						color: #1890ff; // 蓝色
					}
				}
			}
		}
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		
		.empty-icon {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		.empty-text {
			font-size: 28rpx;
			color: #3c6255; // 中绿色
		}
	}
}

/* 对话框样式 */
.dialog-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.dialog-container {
	width: 80%;
	background-color: #ffffff;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.12);
	
	.dialog-header {
		padding: 20rpx;
		text-align: center;
		border-bottom: 1rpx solid rgba(60, 98, 85, 0.1); // 绿色分隔线
		
		.dialog-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #1a5336; // 深绿色
		}
	}
	
	.dialog-content {
		padding: 30rpx;
		
		.dialog-message {
			font-size: 28rpx;
			color: #3c6255; // 中绿色
			text-align: center;
			margin-bottom: 20rpx;
		}
		
		.material-list {
			max-height: 600rpx;
			overflow-y: auto;
			
			.material-item {
				display: flex;
				justify-content: space-between;
				padding: 16rpx;
				border-bottom: 1rpx solid rgba(60, 98, 85, 0.1); // 绿色分隔线
				
				.material-details {
					flex: 1;
					
					.material-name {
						font-size: 28rpx;
						color: #1a5336; // 深绿色
						font-weight: bold;
						margin-bottom: 8rpx;
					}
					
					.material-spec {
						font-size: 24rpx;
						color: #3c6255; // 中绿色
					}
				}
				
				.material-quantity {
					font-size: 28rpx;
					color: #00a870; // 绿色
					font-weight: 500;
				}
			}
		}
	}
	
	.dialog-footer {
		display: flex;
		border-top: 1rpx solid rgba(60, 98, 85, 0.1); // 绿色分隔线
		
		.dialog-btn {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			font-size: 32rpx;
			
			&.cancel-btn {
				color: #3c6255; // 中绿色
				border-right: 1rpx solid rgba(60, 98, 85, 0.1); // 绿色分隔线
			}
			
			&.confirm-btn {
				color: #00a870; // 绿色
				font-weight: 500;
			}
		}
	}
}
</style>
